<template>
	<div class="publish">
		<div class="status_bar">
			<div class="left-button" @click="goBack">取消</div>
			<div class="right-button" @click="sendData">发布</div>
		</div>
		<div class="all">
			<textarea class='publish-item' v-model="billWord" auto-height="true" type="text" placeholder="为图片配上一句话..." />
			<el-upload
			  action="/api/upLoad"
			  :headers="header"
			  list-type="picture-card"
			  :limit=1
			  :auto-upload="true"
				:on-success="uploadSuccess"
			 >
			    <i slot="default" class="el-icon-plus"></i>
			    <div slot="file" slot-scope="{file}">
			      <img
			        class="el-upload-list__item-thumbnail"
			        :src="file.url" alt=""
			      >
			      <span class="el-upload-list__item-actions">
			        <span
			          class="el-upload-list__item-preview"
			          @click="handlePictureCardPreview(file)"
			        >
			          <i class="el-icon-zoom-in"></i>
			        </span>
			        <span
			          v-if="!disabled"
			          class="el-upload-list__item-delete"
			          @click="handleDownload(file)"
			        >
			          <i class="el-icon-download"></i>
			        </span>
			        <span
			          v-if="!disabled"
			          class="el-upload-list__item-delete"
			          @click="handleRemove(file)"
			        >
			          <i class="el-icon-delete"></i>
			        </span>
			      </span>
			    </div>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
			<input type="text" v-model="billAuthor" class='autograph' placeholder="留下你的签名..." />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				header:{
					Authorization:'Bearer '+localStorage.getItem("token")
				},
				billWord:'',
				billAuthor:'',
				billTypeId:11,
				billPic:'',
				billTypes:[],
				billTypeIndex:-1,
				 dialogImageUrl: '',
				         dialogVisible: false,
				         disabled: false
			}
		},
		
		methods: {
			handleRemove(file) {
			   console.log(file);
			},
			handlePictureCardPreview(file) {
			   this.dialogImageUrl = file.url;
			   this.dialogVisible = true;
			},
			handleDownload(file) {
			   console.log(file);
			},
			billTypeChange(e){
				console.log("billTypeChange e",e);
				this.billTypeIndex=e.detail.value;
				this.billTypeId=this.billTypes[this.billTypeIndex].id;
			},
			goBack(){
				this.$router.push("/user")
			},
			uploadSuccess(response, file, fileList){
				console.log("图片上传完成",response, file, fileList);
				if(response&&response.vpath){
					this.billPic=response.vpath;
				}
			},
			sendData(){
				if(this.billWord.length==0 || this.billAuthor.length==0){
					this.$message.warning('请填写海报信息');
					return;
				}
				if(this.billPic.length==0 || this.billPic.length==0){
					this.$message.warning('请选择海报图片');
					return;
				}
				if(this.billTypeId==0 ){
					this.$message.warning('请选择海报分类');
					return;
				}
				
				this.$message.info('正在发布...');
				this.$http.post("/api/bill-infos/create",{
						billAuthor:this.billAuthor,
						billPic:this.billPic,
						billType:{
							id:this.billTypeId
						},
						billWord:this.billWord
					},
				{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
					
			
				}).then((result)=>{
					console.log("sendData result",result);
					if(result.status==401){
						this.$router.push("login");
					}else if(result.status==200){
						this.$message.success('发布成功');
						setTimeout(()=>{
							this.$router.push("/mine")
						},1500);
					}else{
						
					}
				});
			}
		}
	}
</script>

<style>
	.publish{
		width: 900px;
		min-height: 400px;
		position: relative;
		margin: 0 auto;
		background: #eeeeee;
		font-size: 16px !important;
		height: calc(100vh - 44px);
		overflow: hidden;
	}
	
	.status_bar{
		height:44px;
		width:750rpx;
		background: #eeeeee;
		/* display: flex; */
		flex-direction: row;
		align-items: center;
	}
	
	.status_bar .left-button,.status_bar .right-button{
		width:100rpx;
		text-align: center;
	}
	.status_bar .left-button{
		float: left;
		padding:5px;
		color: #fff;
		padding-right:4px;
		border-radius: 4px;
		background-color: #007af9;
	}
	.status_bar .right-button{
		float: right;
		padding:5px;
		color: #fff;
		padding-right:4px;
		border-radius: 4px;
		background-color: #007af9;
	}
	
	.status_bar .title{
		width:550rpx;
		text-align: center;
		
	}
	.all{
		width: 100%;
		background-color: #FFF;
	}
	
	.publish-item{
		background-color: #fff;
		width: 90%;
		padding-top: 20px;
		padding-bottom: 20px;
		background: transparent;
		border: none;
		margin: 0px auto;
		text-align: left;
		font-size: 150%;
		color: #808080;
	}
	
	.all .image{
		width:350px;
		height: 350px;
		margin-left:5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(240,240,240,0.4);
		border:1px dashed rgba(200,200,200,0.7);
	}
	
	.all .image .xiangji{
		background: url(../assets/camera.png) no-repeat center;
		width: 100%;
		height: 100%;
		
	}
	/* .image{
		width: 100px;
		height: 100px;
		margin-top: 30px;
	} */
	
	.autograph{
		background-color: #fff;
		height: 30px;
		width: 90%;
		padding-bottom: 10px;
		padding-top:10px ;
		background: transparent;
		border: none;
		margin: 10px auto;
		text-align: left;
		color: #808080; 
		font-size: 120%;
	}

</style>
